<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>借调</h1>
    <h2>借调用于改变方法的this指向，指向为传入的对象。</h2>
    <p>以下三个方法，需要使用函数对象去调用。</p>
    <ul>
        <li>
            <p>call：</p>
            <p>返回函数的执行结果。</p>
            <ol>
                <li>参数1：对象，用于指定函数内的this指针。</li>
                <li>参数2：rest参数，原函数的参数列表。</li>
            </ol>
        </li>
        <li>
            <p>bind：</p>
            <p>返回函数的对象（不会执行函数）。</p>
            <ol>
                <li>参数1：对象，用于指定函数内的this指针。</li>
                <li>参数2：rest参数，原函数的参数列表。</li>
            </ol>
        </li>
        <li>
            <p>apply：</p>
            <p>返回函数的执行结果。作用和call一样，只是第二个参数需要传入数组。</p>
            <ol>
                <li>参数1：对象，用于指定函数内的this指针。</li>
                <li>参数2：数组，原函数的参数列表。</li>
            </ol>
        </li>
    </ul>
    <ul class="ul1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        let arr = [1,2,3,4,5,6,7,8,9,10];
        // 过滤，仅留下值是偶数的元素
        arr = arr.filter(v => v % 2 == 0);
        console.log(arr);

        let lis = document.querySelectorAll(".ul1>li");
        // lis = lis.filter(v => {
        //     let text = v.innerText;
        //     return text % 2 == 0;
        // });
        console.log(arr instanceof Array);
        // lis不是数组
        console.log(lis instanceof Array);

        // 此时，想要使用数组的方法，就需要用到借调
        // call
        let arr2 = Array.prototype.filter.call(lis,function(v) {
            return v.innerText % 2 == 0;
        });
        console.log(arr2);

        // bind得到函数对象
        let fun = Array.prototype.filter.bind(lis,function(v) {
            return v.innerText % 2 == 0;
        });
        // 得到函数对象的好处，在想要使用的地方可以重复使用。
        console.log(fun());

        // apply，和call一样，但是参数列表要放入数组对象中
        let arr3 = Array.prototype.filter.apply(lis,[v => v.innerText % 2 == 0]);
        console.log(arr3);
    </script>
</body>
</html>